<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){

            var u1=document.getElementById("u1");
           //点击按钮以后会添加超链接
            var btn01=document.getElementById("btn01");

            btn01.onclick=function(){
                //创建一个li 
                var li=document.createElement("li");
                li.innerHTML="<a href='javascript:;'   class='link'>新建的超链接</a>"
                //将li添加到ul中
                u1.appendChild(li);

};

        /* 
            为每一个超链接都绑定一个单击响应函数

            这里我们我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦
            而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定

        */

        /* 
          为每一个超链接都绑定一个单击响应函数  
         */

        //获取所有的a
        var allA=document.getElementsByTagName("a");

        //都绑定需要遍历
        // for(var i=0;i<allA.length;i++){
        //     allA[i].onclick=function(){
        //         alert("我是a的单击响应函数");
        //     }
        // }

        /* 
        我们希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的
        我们可以尝试将其绑定给元素的共同的祖先元素
        

        事件对的委派
        -指将事件统一绑定给元素共同的祖先，这样当后代元素的事件触发时，会一直冒泡到祖先元素
        从而通过祖先元素的响应函数来处理事件
        事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能
        */
       //为ul绑定一个单击响应函数
       u1.onclick=function(event){
           event=event||window.event;
    //事件给谁绑定，this就是谁，这里是u1
        //    target
        //    -event中的target表示的触发事件的对象
        
        //    alert(event.target);
          // alert("我是ul的单击响应函数");
           //如果触发事件的对象是我们期望的元素，则执行否则不执行
           if(event.target.className=="link"){
               alert("我是u1的单击响应函数");
           }


       };
};

    </script>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1" style="background-color:#bfa;">
        <li><a href="javascript:;" class="link"> 超链接1</a></li>
        <li><a href="javascript:;" class="link"> 超链接2</a></li>
        <li><a href="javascript:;" class="link"> 超链接3</a></li>
    </ul>
</body>
</html>